<template>
  <el-card shadow="never" class="margin-top-20 margin-left-20 margin-right-20">
    <el-form label-width="100px">
      <el-form-item label="流程名称：">
        <el-input v-model="process_name" />
      </el-form-item>
    </el-form>
    <div class="padding-left-20">
      <el-steps :active="active">
        <el-step
          v-for="(item, index) in title"
          :key="index"
          :title="item"
        />
      </el-steps>
    </div>

    <template v-if="'选择问诊类型' == title[active]">
      <el-row class="margin-top-20">
        <el-col :span="2" :offset="2" class="padding-left-10">
          图文问诊：
        </el-col>
        <el-col :span="20">
          <el-checkbox
            v-model="consultData.open_consult"
            label="启用"
            disabled
          />
        </el-col>
        <el-col :span="20" :offset="4">
          <span class="color-info text-12">
            启用后，图文咨询最长24小时，不限对话次数
          </span>
        </el-col>
        <el-col :span="20" :offset="4" class="margin-top-10">
          <span class="text-14">以下问诊方式请至少选择1种 </span>
        </el-col>
        <el-col :span="20" :offset="4" class="margin-top-10">
          <el-checkbox
            v-model="consultData.directional_consult"
            label="图文问诊-定向"
          />
        </el-col>
        <el-col :span="20" :offset="4">
          <span class="color-info text-12">
            启用后，由用户选择指定医生咨询
          </span>
        </el-col>
        <el-col :span="20" :offset="4" class="margin-top-10">
          <el-checkbox
            v-model="consultData.no_directional_consult"
            label="图文问诊-非定向"
            @change="change"
          />
        </el-col>
        <el-col :span="20" :offset="4">
          <span class="color-info text-12">
            启用后，由平台指定医生在10分钟内接诊
          </span>
        </el-col>
        <el-col :span="20" :offset="4" class="margin-top-10 padding-left-16">
          <el-checkbox
            v-model="consultData.no_directional_consult_data.speed_text_vip"
          />
          <span
            class="text-14 margin-left-10 cursor-pointer"
            @click="
              consultData.no_directional_consult_data.speed_text_vip =
                !consultData.no_directional_consult_data.speed_text_vip
            "
          >VIP优享极速图文- <span class="color-error">免费</span>
          </span>
        </el-col>
        <el-col :span="20" :offset="4" class="margin-top-10 padding-left-16">
          <el-checkbox
            v-model="consultData.no_directional_consult_data.dimethyl_hospital"
          />
          <span
            class="text-14 margin-left-10 cursor-pointer"
            @click="
              consultData.no_directional_consult_data.dimethyl_hospital =
                !consultData.no_directional_consult_data.dimethyl_hospital
            "
          >二甲医院主治及以上以上极速图文-<span
            class="color-error"
          >¥9.90</span>
          </span>
        </el-col>
        <el-col :span="20" :offset="4" class="margin-top-10 padding-left-16">
          <el-checkbox
            v-model="consultData.no_directional_consult_data.top_three_hospital"
          />
          <span
            class="text-14 margin-left-10 cursor-pointer"
            @click="
              consultData.no_directional_consult_data.top_three_hospital =
                !consultData.no_directional_consult_data.top_three_hospital
            "
          >三甲医院主治及以上以上极速图文-<span
            class="color-error"
          >¥19.90</span></span>
        </el-col>
      </el-row>
    </template>
    <template v-if="'添加就诊人' == title[active]">
      <el-row class="margin-top-20">
        <el-col :span="2" :offset="2" class="padding-left-10 text-align-right">
          <span class="color-error">*</span> 姓名：
        </el-col>
        <el-col :span="20">
          <el-checkbox
            v-model="patientData.patient_name"
            label="启用"
            disabled
          />
        </el-col>
        <el-col :span="20" :offset="4">
          <span class="color-info text-12">
            启用后，该属性为用户问诊必选内容
          </span>
        </el-col>
      </el-row>
      <el-row class="margin-top-10">
        <el-col :span="2" :offset="2" class="padding-left-10 text-align-right">
          出生日期：
        </el-col>
        <el-col :span="20">
          <el-checkbox
            v-model="patientData.patient_birth"
            label="启用"
          />
        </el-col>
        <el-col :span="20" :offset="4">
          <span class="color-info text-12">
            启用后，该属性为用户问诊必选内容
          </span>
        </el-col>
      </el-row>
      <el-row class="margin-top-10">
        <el-col :span="2" :offset="2" class="padding-left-10 text-align-right">
          性别：
        </el-col>
        <el-col :span="20">
          <el-checkbox
            v-model="patientData.patient_sex"
            label="启用"
          />
        </el-col>
        <el-col :span="20" :offset="4">
          <span class="color-info text-12">
            启用后，该属性为用户问诊必选内容
          </span>
        </el-col>
      </el-row>
      <el-row class="margin-top-10">
        <el-col :span="2" :offset="2" class="padding-left-10 text-align-right">
          <span class="color-error">*</span> 联系方式：
        </el-col>
        <el-col :span="20">
          <el-checkbox
            v-model="patientData.patient_mobile"
            disabled
            label="启用"
          />
        </el-col>
        <el-col :span="20" :offset="4">
          <span class="color-info text-12">
            启用后，该属性为用户问诊必选内容
          </span>
        </el-col>
      </el-row>
      <el-row class="margin-top-10">
        <el-col :span="2" :offset="2" class="padding-left-10 text-align-right">
          <span class="color-error">*</span> 身份证号：
        </el-col>
        <el-col :span="20">
          <el-checkbox
            v-model="patientData.patient_idcard"
            disabled
            label="启用"
          />
        </el-col>
        <el-col :span="20" :offset="4">
          <span class="color-info text-12">
            启用后，该属性为用户问诊必选内容
          </span>
        </el-col>
      </el-row>
      <el-row class="margin-top-10">
        <el-col :span="2" :offset="2" class="padding-left-10 text-align-right">
          关系标签：
        </el-col>
        <el-col :span="20">
          <el-checkbox
            v-model="patientData.patient_tag"
            label="启用"
          />
        </el-col>
        <el-col :span="20" :offset="4">
          <span class="color-info text-12">
            启用后，该属性为用户问诊必选内容
          </span>
        </el-col>
      </el-row>
    </template>
    <template v-if="'填写疾病信息' == title[active]">
      <el-row class="margin-top-10">
        <el-col :span="2" :offset="2" class="padding-left-10 text-align-right">
          <span class="color-error">*</span> 病情描述：
        </el-col>
        <el-col :span="20">
          <el-checkbox
            v-model="diseaseData.case_desc"
            label="启用"
            disabled
          />
        </el-col>
        <el-col :span="20" :offset="4">
          <span class="color-info text-12">
            启用后，需用户输入病情相关的问题（症状描述、患病时长、医院检查、用药情况等）
          </span>
        </el-col>
      </el-row>
      <el-row class="margin-top-10">
        <el-col :span="2" :offset="2" class="padding-left-10 text-align-right">
          病历资料：
        </el-col>
        <el-col :span="20">
          <el-checkbox
            v-model="diseaseData.case_data"
            label="启用"
          />
        </el-col>
        <el-col :span="20" :offset="4">
          <span class="color-info text-12">
            启用后，需用户上传检查单、历史病例、患处照片
          </span>
        </el-col>
      </el-row>
    </template>
    <el-row class="margin-top-20">
      <el-col :span="20" :offset="2" class="margin-top-10 text-align-right">
        <el-button v-if="active > 0" size="small" @click="setactive(-1)">
          上一步
        </el-button>
        <el-button
          v-if="active < 2"
          size="small"
          type="primary"
          @click="setactive(+1)"
        >
          下一步
        </el-button>
        <el-button v-else size="small" type="primary" @click="ok">
          保存设置
        </el-button>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import {
  consult_process_detail,
  consult_process_create
} from '@/api/consult-process'
import { toggleBoolean } from '@/utils/index'
export default {
  name: 'ConsultationEdit',

  data() {
    return {
      process_name: '',
      types: '1,2,3',
      consultData: {
        open_consult: true,
        directional_consult: false,
        no_directional_consult: false,
        no_directional_consult_data: {
          speed_text_vip: false,
          dimethyl_hospital: false,
          top_three_hospital: false
        }
      }, // 选择问诊类型
      patientData: {
        patient_name: true,
        patient_birth: false,
        patient_sex: false,
        patient_mobile: true,
        patient_idcard: true,
        patient_tag: false
      }, // 添加就诊人
      diseaseData: {
        case_desc: true,
        case_data: false
      }, // 填写疾病信息
      checked: true,
      open_consult: true,
      process_type: 1,
      active: 0,
      form: {
        open_consult: true
      }
    }
  },
  computed: {
    type() {
      return this.process_type
    },
    title() {
      const type = this.type
      if (type == 1) {
        return ['选择问诊类型', '填写疾病信息', '添加就诊人']
      } else if (type == 2) {
        return ['填写疾病信息', '添加就诊人', '选择问诊类型']
      } else if (type == 3) {
        return ['添加就诊人', '选择问诊类型', '填写疾病信息']
      }
    },
    process() {
      const type = this.type
      const patientData = {
        process_type: 3,
        process_data: toggleBoolean(this.$deepClone(this.patientData), 2)
      }
      const diseaseData = {
        process_type: 2,
        process_data: toggleBoolean(this.$deepClone(this.diseaseData), 2)
      }
      const conData = {
        process_type: 1,
        process_data: {
          consult: toggleBoolean(this.$deepClone(this.consultData), 2)
        }
      }

      if (type == 1) {
        return [conData, diseaseData, patientData]
      } else if (type == 2) {
        return [diseaseData, patientData, conData]
      } else if (type == 3) {
        return [patientData, conData, diseaseData]
      }
    },
    message() {
      const consultData = this.consultData
      if (!this.process_name.trim()) {
        return '请填写流程名称'
      } else if (
        !consultData.directional_consult &&
        !consultData.no_directional_consult
      ) {
        return '问诊方式请至少选择1种'
      }
      if (consultData.no_directional_consult) {
        if (
          !consultData.no_directional_consult_data.speed_text_vip &&
          !consultData.no_directional_consult_data.dimethyl_hospital &&
          !consultData.no_directional_consult_data.top_three_hospital
        ) {
          return '非定向-诊方式至少选择1种方式'
        }
      }
      return false
    }
  },
  mounted() {
    if (this.$route.query.id) {
      consult_process_detail({ process_id: this.$route.query.id }).then(
        (res) => {
          this.form = res.data
          this.process_name = res.data.process_name
          const process = this.$deepClone(res.data.process)
          const types = process
            .map((val) => {
              if (val.process_type == 1) {
                this.consultData = toggleBoolean(val.process_data.consult)
              }
              if (val.process_type == 2) {
                this.diseaseData = toggleBoolean(val.process_data)
              }
              if (val.process_type == 3) {
                this.patientData = toggleBoolean(val.process_data)
              }
              return val.process_type
            })
            .join(',')
          if (types == '1,2,3') {
            this.process_type = 1
          }
          if (types == '2,3,1') {
            this.process_type = 2
          }
          if (types == '3,1,2') {
            this.process_type = 3
          }
          this.types = types
        }
      )
    } else {
      this.process_type = this.$route.query.type
      this.types = '1,2,3'
    }
  },
  methods: {
    change(e) {
      console.log(e)
    },
    ok() {
      if (this.itme) {
        return
      }
      this.itme = setTimeout(() => {
        clearTimeout(this.itme)

        this.itme = null
      }, 1000)
      if (this.message) {
        this.$message({
          message: this.message,
          type: 'error'
        })
      } else {
        const data = {
          type: this.$route.query.id ? 2 : 1,
          process_name: this.process_name,
          process: JSON.stringify(this.process)
        }
        if (this.$route.query.id) {
          data.process_id = this.$route.query.id
        }

        consult_process_create(data).then((res) => {
          this.$router.back()
        })
      }
    },
    setactive(type) {
      this.active += type
      if (this.active > 2) this.active = 2
      if (this.active < 0) this.active = 0
    }
  }
}
</script>

<style lang="scss" scoped>
.wscn-http404-container {
  transform: translate(-50%, -50%);
  position: absolute;
  top: 40%;
  left: 50%;
}
.wscn-http404 {
  position: relative;
  width: 1200px;
  padding: 0 50px;
  overflow: hidden;
  .pic-404 {
    position: relative;
    float: left;
    width: 600px;
    overflow: hidden;
    &__parent {
      width: 100%;
    }
    &__child {
      position: absolute;
      &.left {
        width: 80px;
        top: 17px;
        left: 220px;
        opacity: 0;
        animation-name: cloudLeft;
        animation-duration: 2s;
        animation-timing-function: linear;
        animation-fill-mode: forwards;
        animation-delay: 1s;
      }
      &.mid {
        width: 46px;
        top: 10px;
        left: 420px;
        opacity: 0;
        animation-name: cloudMid;
        animation-duration: 2s;
        animation-timing-function: linear;
        animation-fill-mode: forwards;
        animation-delay: 1.2s;
      }
      &.right {
        width: 62px;
        top: 100px;
        left: 500px;
        opacity: 0;
        animation-name: cloudRight;
        animation-duration: 2s;
        animation-timing-function: linear;
        animation-fill-mode: forwards;
        animation-delay: 1s;
      }
      @keyframes cloudLeft {
        0% {
          top: 17px;
          left: 220px;
          opacity: 0;
        }
        20% {
          top: 33px;
          left: 188px;
          opacity: 1;
        }
        80% {
          top: 81px;
          left: 92px;
          opacity: 1;
        }
        100% {
          top: 97px;
          left: 60px;
          opacity: 0;
        }
      }
      @keyframes cloudMid {
        0% {
          top: 10px;
          left: 420px;
          opacity: 0;
        }
        20% {
          top: 40px;
          left: 360px;
          opacity: 1;
        }
        70% {
          top: 130px;
          left: 180px;
          opacity: 1;
        }
        100% {
          top: 160px;
          left: 120px;
          opacity: 0;
        }
      }
      @keyframes cloudRight {
        0% {
          top: 100px;
          left: 500px;
          opacity: 0;
        }
        20% {
          top: 120px;
          left: 460px;
          opacity: 1;
        }
        80% {
          top: 180px;
          left: 340px;
          opacity: 1;
        }
        100% {
          top: 200px;
          left: 300px;
          opacity: 0;
        }
      }
    }
  }
  .bullshit {
    position: relative;
    float: left;
    width: 300px;
    padding: 30px 0;
    overflow: hidden;
    &__oops {
      font-size: 32px;
      font-weight: bold;
      line-height: 40px;
      color: #1482f0;
      opacity: 0;
      margin-bottom: 20px;
      animation-name: slideUp;
      animation-duration: 0.5s;
      animation-fill-mode: forwards;
    }
    &__headline {
      font-size: 20px;
      line-height: 24px;
      color: #222;
      font-weight: bold;
      opacity: 0;
      margin-bottom: 10px;
      animation-name: slideUp;
      animation-duration: 0.5s;
      animation-delay: 0.1s;
      animation-fill-mode: forwards;
    }
    &__info {
      font-size: 13px;
      line-height: 21px;
      color: grey;
      opacity: 0;
      margin-bottom: 30px;
      animation-name: slideUp;
      animation-duration: 0.5s;
      animation-delay: 0.2s;
      animation-fill-mode: forwards;
    }
    &__return-home {
      display: block;
      float: left;
      width: 110px;
      height: 36px;
      background: #1482f0;
      border-radius: 100px;
      text-align: center;
      color: #ffffff;
      opacity: 0;
      font-size: 14px;
      line-height: 36px;
      cursor: pointer;
      animation-name: slideUp;
      animation-duration: 0.5s;
      animation-delay: 0.3s;
      animation-fill-mode: forwards;
    }
    @keyframes slideUp {
      0% {
        transform: translateY(60px);
        opacity: 0;
      }
      100% {
        transform: translateY(0);
        opacity: 1;
      }
    }
  }
}
</style>
